<template>
	<view class="verify-explain">
	    <view class="verify-explain-item flex--col" :class="{'active':!success}">
	    	<view class="text--main-dark verify-explain-text"><slot name="mainExplain"></slot></view>
	    	<view class="text--thirdary-dark verify-explain-text"><slot name="subExplain"></slot></view>
	    </view>
		<view class="verify-success-item flex--col" :class="{'active':success}">
			<text class="text--secondary-dark">ヽ(￣ω￣(￣ω￣〃)ゝ碰面成功</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:['success']
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 500;
		color:#666;
	}
	
	.verify-explain{
		width:100%;
	}
	
	.verify-explain-item{
		align-items: center;
		justify-content: center;
		gap:6px;
		
		padding:12px;
		display: none;
		&.active{
			display:block;
		}
		
	}
	
	.verify-success-item{
		display:none;
		&.active{
			display:block;
		}
	}
	
	.verify-explain-text{
		text-align: center;
	}
</style>